<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>

<template>
    <Form style="">
        <FormItem label="导入模版">
            <a :href="templateUrl"><Button type="primary" icon="ios-download-outline">点击下载导入模版</Button></a>
        </FormItem>
        
        <FormItem label="导入试题">
            <Upload 
                ref="upload"
                :max-size="20480"
                accept=".xls, .xlsx"
                :format="['xls','xlsx']"
                :headers= "headers"
                :show-upload-list="false"
                :before-upload="handleBeforeUpload"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :action="importAction">
                <Button type="success" icon="ios-upload-outline">选择导入文件</Button>
            </Upload>
        </FormItem>
        <FormItem>
            <p><span style="color: red">*</span>注意: 请严格按照模板文件的格式进行导入，否则可能会出现其他不可预知的错误！</p>
        </FormItem>
    </Form>
</template>

<script>
import http from '../../../libs/http';
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            templateUrl: this.host+'resource/game_question_template.xls',
            importAction: this.host+'admin/game/question/bulkimport',
            uploadList: [],            
        }
    },
    methods: {
        handleBeforeUpload () {
            this.$Spin.show({
                render: (h) => {
                    return h('div', [
                        h('Icon', {
                            'class': 'demo-spin-icon-load',
                            props: {
                                type: 'load-c',
                                size: 18
                            }
                        }),
                        h('div', 'Loading')
                    ])
                }
            });
        },
        handleFormatError (file) {   //文件格式错误
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 xls 或 xlsx 格式的文件。'
            });
        },
        handleMaxSize (file) {   
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 20M。'
            });
        },
        handleUploadSuccess (res, file) {
            if (res.code != 200) {
                this.$Spin.hide();
                this.handleError(res);
            } else {
                this.$Spin.hide();
                this.$Message.success(res.msg);
                this.$emit('closeImport');
            }
        },
        handleUploadError (res, file, flieList) {
            this.handleError(res);
        },
    },
    mounted () {
        this.uploadList = this.$refs.upload.fileList;
    },
    computed: {
        headers() {
            return {
                'authKey': Cookies.get('authKey'),
                'sessionId': Cookies.get('sessionId')
            }
        }
    },
    mixins: [http]
}
</script>